<template>
  <div class="custom-cursor-container">
    <div
      class="cursor-dot"
      :style="{
        transform: `translate(${position.x}px, ${position.y}px)`,
        opacity: isVisible ? 1 : 0
      }"
      :class="{ 'cursor-hover': isHovering }"
    ></div>
    <div
      class="cursor-outline"
      :style="{
        transform: `translate(${position.x}px, ${position.y}px)`,
        opacity: isVisible ? 1 : 0
      }"
      :class="{ 'cursor-hover': isHovering }"
    ></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const position = ref({ x: 0, y: 0 })
const isVisible = ref(false)
const isHovering = ref(false)

// 鼠标移动处理
const handleMouseMove = (e) => {
  position.value = {
    x: e.clientX,
    y: e.clientY
  }
}

// 鼠标进入页面
const handleMouseEnter = () => {
  isVisible.value = true
}

// 鼠标离开页面
const handleMouseLeave = () => {
  isVisible.value = false
}

// 鼠标悬停在可点击元素上
const handleElementHover = (e) => {
  const target = e.target
  if (
    target.tagName.toLowerCase() === 'a' ||
    target.tagName.toLowerCase() === 'button' ||
    target.classList.contains('clickable') ||
    target.closest('.el-button') ||
    target.closest('a') ||
    target.closest('.clickable')
  ) {
    isHovering.value = true
  } else {
    isHovering.value = false
  }
}

// 生命周期钩子
onMounted(() => {
  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseenter', handleMouseEnter)
  document.addEventListener('mouseleave', handleMouseLeave)
  document.addEventListener('mouseover', handleElementHover)
})

onUnmounted(() => {
  document.removeEventListener('mousemove', handleMouseMove)
  document.removeEventListener('mouseenter', handleMouseEnter)
  document.removeEventListener('mouseleave', handleMouseLeave)
  document.removeEventListener('mouseover', handleElementHover)
})
</script>

<style scoped>
.custom-cursor-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.cursor-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--el-color-primary);
  border-radius: 50%;
  transform-origin: center;
  transition: width 0.2s, height 0.2s, opacity 0.2s;
  will-change: transform;
  mix-blend-mode: difference;
}

.cursor-outline {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid var(--el-color-primary);
  border-radius: 50%;
  margin-left: -16px;
  margin-top: -16px;
  transition: all 0.2s ease-out;
  will-change: transform;
  mix-blend-mode: difference;
}

/* 悬停效果 */
.cursor-dot.cursor-hover {
  width: 16px;
  height: 16px;
  margin-left: -4px;
  margin-top: -4px;
  background: var(--el-color-primary-light-3);
}

.cursor-outline.cursor-hover {
  width: 60px;
  height: 60px;
  margin-left: -26px;
  margin-top: -26px;
  border-color: var(--el-color-primary-light-3);
  background: rgba(var(--el-color-primary-rgb), 0.1);
}

/* 暗色模式适配 */
:root[class~="dark"] .cursor-dot {
  background: var(--el-color-primary-light-3);
}

:root[class~="dark"] .cursor-outline {
  border-color: var(--el-color-primary-light-3);
}

/* 移动设备隐藏自定义光标 */
@media (max-width: 768px) {
  .custom-cursor-container {
    display: none;
  }
}
</style> 